<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>在线答题系统</el-breadcrumb-item>
        <el-breadcrumb-item>所有题集</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="margin-top: 20px;">
        <div v-if="arr.length">
            <p>{{ index + 1 }}.{{ arr[index].question }}</p>
            <div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="chec" class="ml-4">
                    <el-radio v-for="item, i in arr[index].answer" v-model="item.isRight" :label="i" size="large">
                        {{ item.questionNumber }}.{{ item.content }}
                    </el-radio>
                </el-radio-group>
            </div>
        </div>
        <div>
            <el-button @click="shang" type="primary">上一题</el-button>
            <el-button @click="xia" type="primary">下一题</el-button>
            <el-button @click="show" type="primary">显示答案</el-button>
            <el-button @click="fenshufn" type="primary">查看分数</el-button>
            <span style="margin-left: 10px;" v-if="arr.length">
                <el-button v-if="!arr[index].isCollect" @click="shoucang" type="primary">收藏</el-button>
                <el-button v-else @click="quxiao" type="success">已收藏</el-button>
            </span>
        </div>
    </el-card>
</template>
<script setup>
import axios from 'axios'
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus'
let arr = ref(JSON.parse(localStorage.getItem('array')) || [])
let index = ref(JSON.parse(localStorage.getItem('index')) || 0)
let chec = ref(null)
let fenshu = ref(JSON.parse(localStorage.getItem('fenshu')) || 0)
function shoucang() {
    arr.value[index.value].isCollect = true
    localStorage.setItem('array', JSON.stringify(arr.value))
    let a = arr.value.filter(item => {
        return item.isCollect
    })
    sessionStorage.setItem('arr', JSON.stringify(a));
}
function quxiao() {
    arr.value[index.value].isCollect = false
    localStorage.setItem('array', JSON.stringify(arr.value))
    let a = arr.value.filter(item => {
        return item.isCollect
    })
    sessionStorage.setItem('arr', JSON.stringify(a));
}
function shang() {
    if (!index.value) {
        ElMessage({
            showClose: true,
            message: '已经是第一题',
            type: 'warning',
            duration: 1000,
        })
    } else {
        index.value--
        fenshu.value--
        localStorage.setItem('index', JSON.stringify(index.value))
        localStorage.setItem('fenshu', JSON.stringify(fenshu.value))
    }
}
function xia() {
    if (chec.value == null) {
        ElMessage({
            showClose: true,
            message: '请选择',
            type: 'warning',
            duration: 1000,
        })
        return
    }
    if (arr.value[index.value].answer[chec.value].isRight) {
        if (index.value == arr.value.length - 1) {
            fenshu.value++
            localStorage.setItem('fenshu', JSON.stringify(fenshu.value))
            ElMessage({
                showClose: true,
                message: '已答完所有题,你的分数是' + fenshu.value + '分',
                type: 'success',
                duration: 1000,
            })
            return
        }
        fenshu.value++
        localStorage.setItem('fenshu', JSON.stringify(fenshu.value))
        index.value++
        localStorage.setItem('index', JSON.stringify(index.value))
        chec.value = null
    } else {
        ElMessage({
            showClose: true,
            message: '选错了',
            type: 'error',
            duration: 3000,
        })
        let aa = JSON.parse(sessionStorage.getItem('cuo')) || []
        if (aa.length) {
            let flag = aa.every((item) => {
                return item.id !== arr.value[index.value].id
            })
            if (flag) {
                aa.push(arr.value[index.value])
            }
        } else {
            aa.push(arr.value[index.value])
        }
        sessionStorage.setItem('cuo', JSON.stringify(aa))
        index.value++
        localStorage.setItem('index', JSON.stringify(index.value))
    }
}
function fenshufn() {
    ElMessage({
        showClose: true,
        message: fenshu.value + '分',
        type: 'success',
        duration: 1000,
    })
}
function show() {
    let a = arr.value[index.value].answer.filter(item => {
        return item.isRight
    })
    ElMessage({
        showClose: true,
        message: a[0].questionNumber,
        type: 'success',
        duration: 3000,
    })
}
</script>
<style></style>